<template>
  <view class="message-card card-common">
    <view class="card-header">
      <view class="card-title text-ellipsis">{{ schedule.classRoomName }}</view>
      <view class="card-subtitle">
        <text
          >{{ formatDate(schedule.startDatetime, 'HH:mm') }} -
          {{ formatDate(schedule.endDatetime, 'HH:mm') }}</text
        >
      </view>
    </view>
    <view class="card-content">
      <view class="content-item flex-row">
        <text class="item-label">课程:</text>
        <text class="item-value">{{ schedule.subjectName }}</text>
      </view>
      <view class="content-item flex-row">
        <text class="item-label">人数:</text>
        <text class="item-value">{{ schedule.studentNum }}</text>
      </view>
    </view>
    <view
      class="card-footer flex-row justify-between items-center"
      v-if="memberStore.profile?.role === 'teacher'"
    >
      <text class="footer-text"></text>
      <button
        class="btn-common btn-warning"
        size="mini"
        @click="studentDataList(schedule.classRoomId)"
      >
        去点名
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { formatDate } from '@/utils'
import type { ScheduleItem } from '@/types/schedule'
import { useMemberStore } from '@/stores'
defineProps<{
  schedule: ScheduleItem
}>()

const studentDataList = (classRoomId: number) => {
  uni.navigateTo({
    url: `/pages/student/studentCourse?classRoomId=${classRoomId}`,
  })
}
const memberStore = useMemberStore()
</script>
<style scoped lang="scss">
@import '../styles/card.scss';
</style>
